<template>
	<view class="schedule_row">
		<!-- 头部行，包含日程标题和添加按钮 -->
		<view class="header_row">
			<view class="left">
				智训日程
			</view>
		</view>
		<!-- 日历部分 -->
		<view class="calendar">
			<ren-calendar ref='ren' :markDays='markDays' @onDayClick='onDayClick'></ren-calendar>
		</view>
		<!-- 数据行，包含日期标题、训练记录类型、图表和统计数据 -->
		<view class="data_row">
			<view class="date_title">
				{{ curDate }}
			</view>
			<!-- 前往录入信息卡片 -->
			<view class="enter_info_card" v-if="isAction">
				<view class="icon">
					<image src="@/static/imgs/date.png" mode=""></image>
					<view class="title">
						指定训练计划
					</view>
				</view>
				<view class="info">
					前往填写您的基本信息及训练偏好，为您个性化制定更科学、有效的训练方案
				</view>
				<view class="btn" @click="handleGoInfo">
					前往
				</view>
			</view>
			<!-- 训练计划模块 - 仅在选中日期是今天时显示 -->
			<view class="" v-else-if="!isBeforeToday()">

				<view class="btn_box">
					<view class="type_row">
						训练记录
					</view>
					<view class="btn">
						<view class="text">
							<image src="/static/tiao.png" mode="widthFix" @click="handleAction"></image>
							<!-- 全局蒙层 -->
							<view class="global-overlay" v-if="showAction" @click="hideAction"></view>
							<view class="select_row" v-if="showAction">
								<view class="select_item" @click="toggleTrainingStatus" v-if="isToday && !isAction">
									{{ currentDayInfo ? '今日休息' : '开始训练' }}
								</view>
								<view class="select_item" @click="goToManagePanel">
									管理面板
								</view>
								<view class="select_item" style="color: rgba(227, 59, 59, 1);" @click="handleCancelPlan"
									v-if="!isAction">
									撤销计划
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 训练信息卡片 -->
				<view class="train_info_card" v-if="currentDayInfo && currentDayInfo.isCompleted">
					<view class="train_info_row">
						<view class="train_info_item">
							<view class="icon_box">
								<image src="@/static/imgs/icon1.png" mode="aspectFit" class="icon"></image>
							</view>
							<view class="info">
								<view class="label">训练部位：</view>
								<view class="value">{{ getTrainBodyText() }}</view>
							</view>
						</view>
						<view class="train_info_item">
							<view class="icon_box">
								<image src="@/static/imgs/icon2.png" mode="aspectFit" class="icon"></image>
							</view>
							<view class="info">
								<view class="label">预计时长：</view>
								<view class="value">{{ getTotalTrainTime() }}分钟</view>
							</view>
						</view>
						<view class="train_info_item">
							<view class="icon_box">
								<image src="@/static/imgs/icon3.png" mode="aspectFit" class="icon"></image>
							</view>
							<view class="info">
								<view class="label">训练进度：</view>
								<view class="value">{{ getTrainProgress() }}%</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 训练动作列表 -->
				<view class="exercise_list" v-if="currentDayInfo">
					<view class="exercise_card" v-for="(detail, index) in currentDayInfo.trainDayInfoDetailResponses"
						:key="index">
						<view class="exercise_header">
							<view class="part_tag">{{ getBodyPartName(detail.trainBody) }}训练</view>
							<view class="exercise_name">{{ getExerciseName(detail.trainBody) }}</view>
						</view>
						<view class="exercise_sets" v-if="detail.trainDayOtherInfoResponses.length != 0">
							<!-- 使用trainDayOtherInfoResponses数组显示每组的数据 -->
							<view class="set_item"
								v-for="(setInfo, setIndex) in (detail.trainDayOtherInfoResponses || [])"
								:key="setIndex">
								<view class="set_label">
									<text class="label-desc">{{ getFuHeDescription(detail.trainFuHe) }}</text>
								</view>
								<view class="set_value">{{ setInfo.cishu}}次 ×
									{{ setInfo.weight || getDefaultWeight() }}kg
								</view>
								<view class="set_completed" v-if="currentDayInfo.isCompleted">
									<view class="check_icon"></view>
								</view>
							</view>
						</view>
						<view class="exercise_sets" v-else>
							<!-- 使用trainDayOtherInfoResponses数组显示每组的数据 -->
							<view class="set_item"
								v-for="(setInfo, setIndex) in ( currentDayInfo.trainDayInfoDetailResponses || [])"
								:key="setIndex">
								<view class="set_label">
									<text class="label-desc">{{ getFuHeDescription(detail.trainFuHe) }}</text>
								</view>
								<view class="set_value">{{ detail.trainNum}}次
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 历史记录模块 - 仅在选中日期早于今天时显示 -->
			<view class="" v-else-if="isBeforeToday() && !isToday">

				<view class="btn_box">
					<view class="type_row">
						历史记录
					</view>
				</view>
				<view class="echart_box">
					<l-echart ref="chartRef" @finished="initChart"></l-echart>
				</view>
				<view class="echart_box">
					<l-echart ref="chartRef2" @finished="initChart"></l-echart>
				</view>
			</view>

			<view class="statistical_data" v-else-if="isBeforeToday() && !isToday">
				<view class="statistical_item">
					<view>
						总组数
					</view>
					<view class="weight">
						{{ getTotalSets() }}组
					</view>
				</view>
				<view class="statistical_item">
					<view>
						总容量
					</view>
					<view class="weight">
						{{ getTotalVolume() }}kg
					</view>
				</view>
				<view class="statistical_item">
					<view>
						平均重量
					</view>
					<view class="weight">
						{{ getAverageWeight() }}kg
					</view>
				</view>
			</view>
		</view>

		<!-- 日期选择器弹窗 -->
		<view class="date-picker-mask" v-if="showDatePicker" @click="closeDatePicker"></view>
		<view class="date-picker-container" v-if="showDatePicker">
			<view class="date-picker-header">
				<text>你想将今日推迟到哪天</text>
			</view>
			<view class="date-picker-body">
				<picker mode="date" :value="delayDate" :start="today" :end="maxDate" @change="onDateChange">
					<view class="date-picker-value">
						{{ formatDisplayDate(delayDate) }}
					</view>
				</picker>
			</view>
			<view class="date-picker-footer">
				<button class="cancel-btn" @click="closeDatePicker">取消</button>
				<button class="confirm-btn" @click="confirmDelayDate">确定</button>
			</view>
		</view>
	</view>
</template>
<script>
	import * as echarts from "@/pagesTool/static/echarts.min.js";
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import {
		chartOptions1,
		chartOptions2
	} from '@/utils/echartsConfig.js';
	import {
		isFirstTrain,
		getTrainDay,
		delayPlan,
		advancePlan,
		cancelPlan
	} from '@/apis/schedule.js'
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				curDate: '',
				markDays: [],
				checked: true,
				dayActions: [],
				currentDayInfo: null,
				showAction: false,
				// 今天的日期
				today: '',
				// 是否是今天
				isToday: false,
				// 延期日期
				delayDate: '',
				// 最大可选日期（7天后）
				maxDate: '',
				// 是否显示日期选择器
				showDatePicker: false,
				isAction: false,
				// 训练部位映射
				bodyPartMap: {
					0: '胸部',
					1: '背部',
					2: '肩部',
					3: '手臂',
					4: '臀部',
					5: '腿部'
				},
				// 负荷类型映射
				fuHeTypeMap: {
					0: 'P',
					1: 'S',
					2: 'H',
					3: 'E'
				},
				// 负荷类型描述映射
				fuHeDescriptionMap: {
					0: '爆发',
					1: '力量',
					2: '增肌',
					3: '耐力'
				},
				// 默认重量（暂时写死）
				defaultWeight: 0
			};
		},
		onShow() {
			this.initChart();
			let today = this.$refs.ren.getToday().date;
			console.log(this.$refs.ren);
			this.curDate = today;
			this.today = today;

			// 设置最大可选日期（7天后）
			const maxDate = new Date();
			maxDate.setDate(maxDate.getDate() + 7);
			this.maxDate = this.formatDate(maxDate);
			console.log('七天后', this.maxDate);
			// 默认延期日期为明天
			const tomorrow = new Date();
			tomorrow.setDate(tomorrow.getDate() + 1);
			this.delayDate = this.formatDate(tomorrow);


			this.refreshData();

		},
		methods: {
			onDayClick(e) {
				this.curDate = e.date;
				this.currentDayInfo = this.dayActions.find(v => v.trainDay == e.date) || null;

				console.log('当前选中的日期对象', this.currentDayInfo);

				// 检查选中的日期是否是今天
				this.isToday = (this.curDate == this.today);

				// 如果是历史记录，重新初始化图表
				if (this.isBeforeToday() && !this.isToday) {
					this.initChart();
				}
			},
			handleAction() {
				this.showAction = !this.showAction;
			},
			hideAction() {
				this.showAction = false;
			},

			toggleTrainingStatus() {
				// 如果当前有训练计划，则设置为休息日
				if (this.currentDayInfo) {
					// 打开日期选择器
					this.showDatePicker = true;
				} else {
					this.handleAdvancePlan()
				}
				this.hideAction();
			},

			// 日期选择器改变事件
			onDateChange(e) {
				this.delayDate = e.detail.value;
			},

			// 关闭日期选择器
			closeDatePicker() {
				this.showDatePicker = false;
			},

			// 确认延期日期
			confirmDelayDate() {
				uni.showModal({
					title: '推迟训练日',
					content: `确定要将今日训练推迟到 ${this.formatDisplayDate(this.delayDate)} 吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							});

							// 调用延期计划接口，传入当前日期和延期日期
							delayPlan({
								nowDay: this.formatApiDate(this.delayDate)
							}).then(res => {
								if (res.data) {
									uni.showToast({
										title: '已设置为休息日',
										icon: 'success'
									});
									// 重新获取页面数据
									this.refreshData();
								} else {
									uni.showToast({
										title: res.msg || '操作失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								uni.showToast({
									title: '网络异常，请重试',
									icon: 'none'
								});
							}).finally(() => {
								uni.hideLoading();
								this.closeDatePicker();
							});
						}
					}
				});
			},
			handleAdvancePlan() {
				uni.showModal({
					title: '提前计划',
					content: '确定要提前计划吗？',
					success: (res) => {
						if (res.confirm) {
							// 调用提前计划接口，不需要额外参数
							advancePlan().then(res => {
								if (res.data) {
									uni.showToast({
										title: '计划已提前',
										icon: 'success'
									});

									// 重新获取页面数据
									this.refreshData();
								} else {
									uni.showToast({
										title: res.msg || '操作失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								uni.showToast({
									title: '网络异常，请重试',
									icon: 'none'
								});
							}).finally(() => {
								uni.hideLoading();
							});
						}
					}
				});
				this.hideAction();
			},
			handleGoInfo() {
				uni.navigateTo({
					url: '/pagesTool/bodyBaseData/bodyBaseData'
				})
			},
			handleCancelPlan() {
				uni.showModal({
					title: '撤销计划',
					content: '确定要清空当前所有计划吗？',
					success: (res) => {
						if (res.confirm) {
							// 调用撤销计划接口，不需要额外参数
							cancelPlan().then(res => {
								if (res.data) {
									uni.showToast({
										title: '计划已撤销',
										icon: 'success'
									});

									// 重新获取页面数据
									this.refreshData();
								} else {
									uni.showToast({
										title: res.msg || '操作失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								uni.showToast({
									title: '网络异常，请重试',
									icon: 'none'
								});
							}).finally(() => {
								uni.hideLoading();
							});
						}
					}
				});
				this.hideAction();
			},

			// 刷新数据
			refreshData() {
				// 清空现有数据
				this.markDays = [];
				this.dayActions = [];
				console.log('刷新数据');
				// 重新获取训练日数据
				isFirstTrain().then(res => {
					if (res.data) {
						// uni.navigateTo({
						// 	url: '/pagesTool/bodyBaseData/bodyBaseData'
						// })
						this.isAction = true
						console.log('isAction', this.isAction);
					} else {
						this.isAction = false
						getTrainDay().then(res => {
							if (res.data) {
								res.data.forEach(v => {
									v.trainDay = this.formatDate(v.trainDay)
									this.markDays.push(v.trainDay)
								})
								this.dayActions = res.data
								this.onDayClick({
									date: this.curDate
								})
							}
						})
					}
				})
			},
			// 判断选中日期是否早于今天
			isBeforeToday() {
				if (!this.curDate || !this.today) return false;

				// 将日期字符串转换为Date对象进行比较
				const selectedDate = new Date(this.curDate.replace(/-/g, '/'));
				const todayDate = new Date(this.today.replace(/-/g, '/'));

				// 重置时间部分，只比较日期
				selectedDate.setHours(0, 0, 0, 0);
				todayDate.setHours(0, 0, 0, 0);

				// 如果选中日期早于今天，返回true
				return selectedDate < todayDate;
			},
			// 格式化日期为API所需格式 (2025-05-08T12:00:00)
			formatApiDate(dateStr) {
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}T12:00:00`;
			},

			// 格式化日期为显示格式 (2025年05月08日)
			formatDisplayDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}年${month}月${day}日`;
			},
			goToManagePanel() {
				uni.navigateTo({
					url: '/pagesTool/managementPanel/managementPanel'
				});
				this.hideAction();
			},
			async initChart() {
				// 如果没有当前日期数据或不是历史记录，则不初始化图表
				if (!this.currentDayInfo || !this.isBeforeToday()) {
					console.log(3);
					return;
				}

				const chart = await this.$refs.chartRef.init(echarts);
				const chart2 = await this.$refs.chartRef2.init(echarts);

				// 准备第一个图表数据 - 按动作分组的训练容量
				const exerciseData = this.prepareExerciseChartData();
				const options1 = {
					...chartOptions1,
					xAxis: {
						...chartOptions1.xAxis,
						data: exerciseData.names
					},
					series: [{
						...chartOptions1.series[0],
						data: exerciseData.volumes
					}]
				};

				// 准备第二个图表数据 - 按组数的训练容量和重量
				const setData = this.prepareSetChartData();
				console.log('setData', setData);
				const options2 = {
					...chartOptions2,
					xAxis: {
						...chartOptions2.xAxis,
						data: setData.labels
					},
					series: [{
							...chartOptions2.series[0],
							data: setData.volumeData
						},
						{
							...chartOptions2.series[1],
							data: setData.weightData
						}
					]
				};

				chart.setOption(options1);
				chart2.setOption(options2);
			},

			// 准备第一个图表数据 - 按动作分组的训练容量
			prepareExerciseChartData() {
				const names = [];
				const volumes = [];

				if (this.currentDayInfo && this.currentDayInfo.trainDayInfoDetailResponses) {
					this.currentDayInfo.trainDayInfoDetailResponses.forEach(detail => {
						// 获取动作名称
						const exerciseName = this.getExerciseName(detail.trainBody);
						names.push(exerciseName);

						// 计算该动作的总容量
						let exerciseVolume = 0;
						if (detail.trainDayOtherInfoResponses && detail.trainDayOtherInfoResponses.length > 0) {
							detail.trainDayOtherInfoResponses.forEach(setInfo => {
								const weight = setInfo.weight || this.defaultWeight;
								const cishu = setInfo.cishu || this.getDefaultReps(detail.trainFuHe);
								exerciseVolume += weight * cishu;
							});
						}

						volumes.push(exerciseVolume);
					});
				}

				return {
					names,
					volumes
				};
			},

			// 准备第二个图表数据 - 按组数的训练容量和重量
			prepareSetChartData() {
				const labels = [];
				const volumeData = [];
				const weightData = [];

				if (this.currentDayInfo && this.currentDayInfo.trainDayInfoDetailResponses) {
					// 获取所有组的数据
					let allSets = [];

					this.currentDayInfo.trainDayInfoDetailResponses.forEach(detail => {
						if (detail.trainDayOtherInfoResponses && detail.trainDayOtherInfoResponses.length > 0) {
							detail.trainDayOtherInfoResponses.forEach((setInfo, index) => {
								const setNumber = index + 1;
								const weight = setInfo.weight || this.defaultWeight;
								const cishu = setInfo.cishu || this.getDefaultReps(detail.trainFuHe);
								const volume = weight * cishu;

								allSets.push({
									setNumber,
									weight,
									volume,
									exerciseName: this.getExerciseName(detail.trainBody)
								});
							});
						}
					});

					// 按组号排序
					allSets.sort((a, b) => a.setNumber - b.setNumber);

					// 提取数据
					allSets.forEach(set => {
						// 组号或热身标签
						labels.push(set.setNumber === 1 ? '热身' : set.setNumber);

						// 容量数据
						volumeData.push({
							value: set.volume,
							labelText: `${set.volume}`
						});

						// 重量数据
						weightData.push({
							value: set.volume, // 保持与容量相同的高度
							labelText: `${set.weight}kg`
						});
					});
				}


				return {
					labels,
					volumeData,
					weightData
				};
			},
			// 获取训练部位文本
			getTrainBodyText() {
				if (!this.currentDayInfo || !this.currentDayInfo.trainDayInfoDetailResponses) {
					return '';
				}

				// 获取所有不重复的训练部位
				const bodyParts = [...new Set(this.currentDayInfo.trainDayInfoDetailResponses.map(item => item
					.trainBody))];

				// 将训练部位ID转换为名称并用+连接
				return bodyParts.map(id => this.bodyPartMap[id] || `未知部位(${id})`).join('+');
			},

			// 获取训练时长（暂时按每个动作15分钟计算）
			getTotalTrainTime() {
				if (!this.currentDayInfo || !this.currentDayInfo.trainDayInfoDetailResponses) {
					return 0;
				}

				return this.currentDayInfo.trainDayInfoDetailResponses.length * 15;
			},

			// 获取训练进度（暂时固定返回）
			getTrainProgress() {
				return 77.8;
			},

			// 获取部位名称
			getBodyPartName(bodyPartId) {
				return this.bodyPartMap[bodyPartId] || `未知部位(${bodyPartId})`;
			},

			// 获取训练动作名称（根据部位生成示例名称）
			getExerciseName(bodyPartId) {
				const partName = this.getBodyPartName(bodyPartId);
				const exercises = {
					'胸部': ['卧推'],
					'背部': ['俯身划船'],
					'肩部': ['站姿推肩'],
					'手臂': ['哑铃弯举'],
					'臀部': ['罗马尼亚硬拉'],
					'腿部': ['深蹲']
				};

				// 获取对应部位的第一个动作名称
				const partExercises = exercises[partName] || ['未知动作'];
				return partExercises[0];
			},

			// 获取负荷标签
			getFuHeLabel(fuHeId) {
				return this.fuHeTypeMap[fuHeId] || `未知(${fuHeId})`;
			},

			// 获取负荷描述
			getFuHeDescription(fuHeId) {
				return this.fuHeDescriptionMap[fuHeId] || '';
			},

			// 获取默认重复次数（根据负荷类型）
			getDefaultReps(fuHeId) {
				const repsMap = {
					0: 12, // P类型
					1: 8, // S类型
					2: 6, // H类型
					3: 15 // A类型
				};

				return repsMap[fuHeId] || 10;
			},

			// 获取默认重量
			getDefaultWeight() {
				return this.defaultWeight;
			},

			// 获取总组数
			getTotalSets() {
				if (!this.currentDayInfo || !this.currentDayInfo.trainDayInfoDetailResponses) {
					return 0;
				}

				let totalSets = 0;
				this.currentDayInfo.trainDayInfoDetailResponses.forEach(item => {
					// 如果有trainDayOtherInfoResponses数据，使用其长度作为组数
					if (item.trainDayOtherInfoResponses && item.trainDayOtherInfoResponses.length > 0) {
						totalSets += item.trainDayOtherInfoResponses.length;
					} else {
						// 否则使用trainNum
						totalSets += item.trainNum;
					}
				});

				return totalSets;
			},

			// 获取总容量（重量×次数×组数）
			getTotalVolume() {
				if (!this.currentDayInfo || !this.currentDayInfo.trainDayInfoDetailResponses) {
					return 0;
				}

				let totalVolume = 0;
				this.currentDayInfo.trainDayInfoDetailResponses.forEach(item => {
					// 如果有trainDayOtherInfoResponses数据
					if (item.trainDayOtherInfoResponses && item.trainDayOtherInfoResponses.length > 0) {
						// 计算每组的容量并累加
						item.trainDayOtherInfoResponses.forEach(setInfo => {
							const weight = setInfo.weight || this.defaultWeight;
							const cishu = setInfo.cishu || this.getDefaultReps(item.trainFuHe);
							totalVolume += weight * cishu;
						});
					}
				});

				return totalVolume;
			},

			// 获取平均重量
			getAverageWeight() {
				if (!this.currentDayInfo || !this.currentDayInfo.trainDayInfoDetailResponses) {
					return this.defaultWeight;
				}

				let totalWeight = 0;
				let weightCount = 0;

				this.currentDayInfo.trainDayInfoDetailResponses.forEach(item => {
					// 如果有trainDayOtherInfoResponses数据
					if (item.trainDayOtherInfoResponses && item.trainDayOtherInfoResponses.length > 0) {
						item.trainDayOtherInfoResponses.forEach(setInfo => {
							if (setInfo.weight) {
								totalWeight += setInfo.weight;
								weightCount++;
							}
						});
					} else {
						// 使用默认重量
						totalWeight += this.defaultWeight * item.trainNum;
						weightCount += item.trainNum;
					}
				});

				return weightCount > 0 ? Math.round(totalWeight / weightCount) : this.defaultWeight;
			},

			/**
			 * 获取任意时间
			 */
			getDate(date, AddDayCount = 0) {
				if (!date) {
					date = new Date();
				}
				if (typeof date !== 'object') {
					date = date.replace(/-/g, '/');
				}
				const dd = new Date(date);

				dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

				const y = dd.getFullYear();
				const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
				const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
				return {
					fullDate: y + '-' + m + '-' + d,
					year: y,
					month: m,
					date: d,
					day: dd.getDay()
				};
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e);
			},
			// 格式化时间
			formatDate(timeStr) {
				const date = new Date(timeStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		}
	};
</script>


<style scoped lang="scss">
	.schedule_row {
		padding: 20rpx;
		background-color: #f9f9f9 !important;
		padding-bottom: 50rpx;

		.header_row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 40rpx;
			font-weight: 600;

			.add {
				font-size: 80rpx;
				font-weight: 500;
				color: rgba(110, 88, 170, 1);
			}
		}

		.data_row {
			.date_title {
				font-weight: 600;
				margin: 30rpx 0;
			}

			.btn_box {
				display: flex;
				justify-content: space-between;

				.type_row {
					padding: 5rpx 15rpx;
					border-radius: 10px;
					background: rgba(110, 88, 170, 0.2);
					color: rgba(110, 88, 170, 1);
					width: fit-content;
				}

				.btn {
					display: flex;
					align-items: center;

					.text {
						margin-left: 20rpx;
						position: relative;
						z-index: 1000; // 确保菜单在蒙层之上

						// 全局蒙层
						.global-overlay {
							position: fixed;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background-color: rgba(0, 0, 0, 0.5);
							z-index: 999;
						}

						.select_row {
							position: absolute;
							width: 140rpx;
							background-color: #fff;
							border-radius: 10rpx;
							left: -70px;
							top: 0;
							// padding: 20rpx 0;
							box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
							z-index: 1001; // 确保菜单在蒙层之上

							.select_item {
								font-size: 24rpx;
								text-align: center;
								border-bottom: 1rpx solid #f0f0f0;
								padding: 16rpx 0;
								color: #333;

								&:last-child {
									border-bottom: none;
								}

								&:active {
									background-color: #f5f5f5;
								}
							}
						}

						image {
							width: 40rpx;
						}
					}
				}
			}

			.enter_info_card {
				width: 100%;
				margin-top: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;

				.icon {
					width: 100%;
					text-align: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					.title {
						font-weight: 600;
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}

				.info {
					width: 100%;
					text-align: center;
					font-size: 10px;
					font-weight: 500;
					color: rgba(124, 124, 126, 1);
					margin-top: 30rpx;
				}

				.btn {
					width: 64px;
					height: 23px;
					border-radius: 5px;
					background: rgba(110, 88, 170, 1);
					color: #fff;
					line-height: 23px;
					text-align: center;
					margin: 0 auto;
					margin-top: 30rpx;
				}
			}

			/* 训练信息卡片样式 */
			.train_info_card {
				width: 100%;
				margin-top: 30rpx;
				background-color: #f5f5fa;
				border-radius: 20rpx;
				padding: 30rpx;

				.train_info_row {
					display: flex;
					flex-direction: column;
					gap: 20rpx;

					.train_info_item {
						display: flex;
						align-items: center;

						.icon_box {
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.icon {
								width: 80%;
								height: 80%;
							}
						}

						.info {
							display: flex;
							align-items: center;

							font-weight: 600;
							color: rgba(124, 124, 126, 1);
							font-size: 28rpx;

							.label {}

							.value {}
						}
					}
				}
			}

			.exercise_list {
				margin-top: 30rpx;

				.exercise_card {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;

					.exercise_header {
						// display: flex;
						// align-items: center;
						margin-bottom: 20rpx;

						.part_tag {
							font-size: 24rpx;
							color: rgba(110, 88, 170, 1);
							background-color: rgba(110, 88, 170, 0.08);
							padding: 4rpx 18rpx;
							border-radius: 12rpx;
							margin-right: 20rpx;
							font-weight: 600;
							width: fit-content;
						}

						.exercise_name {
							font-size: 32rpx;
							font-weight: 600;
							color: #000;
							margin-top: 20rpx;
						}
					}

					.exercise_sets {
						.set_item {
							display: flex;
							align-items: center;
							margin-bottom: 16rpx;

							.set_label {
								width: 120rpx; // 增加宽度以容纳更多文字
								font-size: 28rpx;
								color: rgba(110, 88, 170, 0.5);
								display: flex;
								align-items: center;

								.label-desc {
									// margin-left: 8rpx;
									// font-size: 22rpx;
									color: rgba(110, 88, 170, 0.7);
								}
							}

							.set_value {
								flex: 1;
								font-size: 28rpx;
								color: rgba(124, 124, 126, 1);
							}

							.set_completed {
								width: 40rpx;
								height: 40rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								.check_icon {
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									background-color: #6e58aa;
									position: relative;

									&::before {
										content: '';
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%) rotate(45deg);
										width: 6rpx;
										height: 12rpx;
										border-bottom: 3rpx solid #fff;
										border-right: 3rpx solid #fff;
									}
								}
							}
						}
					}
				}
			}

			.echart_box {
				width: 100%;
				margin-top: 30rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 10rpx;
				// height: 400rpx;
			}
		}

		.statistical_data {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 50rpx;

			.statistical_item {
				padding: 10rpx 50rpx;
				border-radius: 20rpx;
				border: 1px solid rgba(110, 88, 170, 0.1);
				text-align: center;
				font-weight: 600;

				.weight {
					color: rgba(110, 88, 170, 1);
				}

			}
		}
	}
</style>
<style lang="scss">
	.choose {
		background-color: rgba(110, 88, 170, 1) !important;
	}

	.today {

		background-color: rgba(110, 88, 170, 0.3) !important;
	}

	.markDay {
		background-color: rgba(110, 88, 170, 1) !important;
		/* margin-top: 10rpx !important; */
		transform: translate(-50%, 0%);
		bottom: -2% !important;
	}

	.pre {
		color: rgba(110, 88, 170, 1) !important;
		border: none !important;
	}

	.next {
		color: rgba(110, 88, 170, 1) !important;
		border: none !important;
	}

	.header {
		justify-content: space-between !important;
	}

	/* 日期选择器样式 */
	.date-picker-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9998;
	}

	.date-picker-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 16rpx;
		width: 600rpx;
		overflow: hidden;
		z-index: 9999;
	}

	.date-picker-header {
		padding: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1px solid #f0f0f0;
	}

	.date-picker-body {
		padding: 40rpx 30rpx;

		.date-picker-value {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			color: rgba(110, 88, 170, 1);
			border: 1px solid #e0e0e0;
			border-radius: 8rpx;
		}
	}

	.date-picker-footer {
		display: flex;
		border-top: 1px solid #f0f0f0;

		button {
			flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 0;
			margin: 0;

			&::after {
				border: none;
			}
		}

		.cancel-btn {
			background-color: #f5f5f5;
			color: #666;
		}

		.confirm-btn {
			background-color: rgba(110, 88, 170, 1);
			color: #fff;
		}
	}
</style>